<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>记事</title>
    {% include "./header.html" %}
</head>

<body>
    <table id="example2" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>记事标题</th>
                <th>所属分类</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    {% include "./footer.html" %}
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">  
                            <span aria-hidden="true">×</span>  
                        </button>
                    <h4 class="modal-title" id="myModalLabel">编辑</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">记事标题</label>
                        <input class="form-control" id="title" name="title" placeholder="请输入记事标题">
                        <input type="hidden" class="form-control" id="id" name="id" >
                    </div>
                    <div class="form-group">
                        <label for="name">记事日期</label>
                        <div class="input-group date">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input type="text" class="form-control pull-right" id="datepicker">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="remark">所属分类</label>
                        <div class="form-group">
                            <select class="form-control" id="category_name">
                                
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="content">记事详情</label>
                        <form>
                            <textarea class="textarea" id="content" name="content" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary button">确认更新</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    $(function () {
        $.ajax({
            type: 'get',
            url: 'http://127.0.0.1:8360/thing/list',
            success: function (data) {
                //DataTable
                var table = $('#example2').DataTable({
                    'paging': true,
                    'lengthChange': false,
                    'searching': false,
                    'ordering': true,
                    'info': true,
                    'autoWidth': false,
                    'data': data,
                    'columns': [
                        {
                            "data": "title"
                        },
                        {
                            "data": "category_name"
                        }],
                    "columnDefs": [{//设置 编辑按钮
                        "targets": [2],
                        "data": "id",
                        "render": function (data, type, full) {
                            return "<a class='edit' href='javascript:void(0)' edit='" + data + "'data-toggle='modal' data-target='#myModal' >编辑</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class='del' del='" + data + "'href='javascript:void(0)'>删除</a>";
                        }
                    }],
                    "oLanguage": {
                        "sLengthMenu": "每页显示 _MENU_ 条记录",
                        "sZeroRecords": "对不起，查询不到任何相关数据",
                        "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                        "sInfoEmtpy": "找不到相关数据",
                        "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",
                        "sProcessing": "正在加载中...",
                        "sSearch": "搜索",
                        "sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
                        "oPaginate": {
                            "sFirst": "第一页",
                            "sPrevious": " 上一页 ",
                            "sNext": " 下一页 ",
                            "sLast": " 最后一页 "
                        }
                    }, //多语言配置
                })
                //DataTable
                //给行绑定选中事件
                $('#example2 tbody').on('click', 'tr', function () {
                    if ($(this).hasClass('selected')) {
                        $(this).removeClass('selected');
                    }
                    else {
                        table.$('tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                    }
                });
                //删除
                $(".del").click(function () {
                    $.ajax({
                        type: 'post',
                        url: 'http://127.0.0.1:8360/thing/del',
                        data: { "id": $(this).attr("del") },
                        success: function (data) {
                            if (data.succ) {
                                alert("删除成功");
                                window.location.reload();
                            } else {
                                alert("删除失败");
                            }
                        }
                    });
                });
                //编辑
                $(".edit").click(function () {
                    var that =this;
                    $.ajax({
                        type: 'get',
                        url: 'http://127.0.0.1:8360/category/list',
                        success: function (res) {
                            console.log(res)
                            var htmlstr;
                            for( item in res){
                                htmlstr+="<option>"+res[item].name+"</option>"
                            }
                            $("#category_name").html(htmlstr);
                            var data = table.row($(that).parents('tr')).data();
                            $('.textarea').wysihtml5()
                            $('#datepicker').datepicker({
                                autoclose: true,
                                language: "zh-CN",
                                format: 'yyyy-mm-dd'
                            })
                            $("#id").val(data.id);
                            $("#title").val(data.title);
                            $("#datepicker").val(data.times);
                            $("#content").val(data.content);
                            $("#category_name").val(data.category_name);
                        }
                    })
                    
                });
                //编辑更新
                $(".button").click(function () {
                    var title=$("#title").val();
                    var times=$("#datepicker").val();
                    var content=$("#content").val();
                    var category_name=$("#category_name").val();
                    var id=$("#id").val();
                    $.ajax({
                        type: 'post',
                        url: 'http://127.0.0.1:8360/thing/save',
                        data:{"title":title,"content":content,"category_name":category_name,"times":times,"id":id},
                        success: function (data) {
                            if(data.succ){
                                alert("更新成功");
                                window.location.reload();
                            }else{
                                alert("更新失败");
                            }
                        }
                    });

                });

            }
        });
    })

</script>

</html>